import IconRefresh from '../../components/IconRefresh.vue';
import {markRaw} from 'vue';

export default function field({t}) {
  return [
    {
      type: 'input',
      field: 'field',
      value: '',
      title: t('form.field'),
    },
    {
      type: 'input',
      field: 'title',
      value: '',
      title: t('form.title'),
    },
    {
      type: 'input',
      field: 'info',
      value: '',
      title: t('form.info'),
    },
    {
      type: 'Struct',
      field: '_control',
      value: [],
      title: t('form.control'),
      info: {
        native: true,
        effect: 'light',
        align: 'left',
        children: [{
          type:'div',
          domProps:{
            innerHTML:t('form.document') + '：<a target="_blank" href="https://form-create.com/v3/guide/control">https://form-create.com/v3/guide/control</a>'
          }
        }],
      },
      props: {
        defaultValue: [],
        validate(val) {
          if (!Array.isArray(val)) return false;
          if (!val.length) return true;
          return !val.some(({rule}) => {
            return !Array.isArray(rule);
          });
        }
      }
    },
    {
      type: 'col',
      props: {
        span: 24,
      },
      children: [
        {
          type: 'a-space',
          props: {
            fill: true,
          },
          children: [
            {
              type: 'a-button',
              props: {
                type: 'primary',
                size: 'small',
              },
              inject: true,
              on: {
                click({$f}) {
                  const rule = $f.activeRule;
                  if (rule) {
                    rule.__fc__.updateKey();
                    rule.value = undefined;
                    rule.__fc__.$api.sync(rule);
                  }
                },
              },
              native: true,
              children: [
                {type: 'i', class: 'fc-icon icon-delete'},
                t('form.clear'),
              ],
            },
            {
              type: 'a-button',
              props: {
                type: 'primary',
                size: 'small',
                status: 'success',
                icon: markRaw(IconRefresh),
              },
              inject: true,
              on: {
                click({$f}) {
                  const rule = $f.activeRule;
                  if (rule) {
                    rule.__fc__.updateKey(true);
                    rule.__fc__.$api.sync(rule);
                  }
                },
              },
              native: true,
              children: [t('form.refresh')],
            },
          ],
        },
      ],
    },
  ];
}
